<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Examine normal transformation</title>

    <!-- Basic style -->
    <link rel="stylesheet" href="style.css" type="text/css">

    <!-- Tangle -->
    <script type="text/javascript" src="../Tangle/Tangle.js"></script>

    <!-- TangleKit -->
    <link rel="stylesheet" href="../Tangle/TangleKit/TangleKit.css" type="text/css">
    <script type="text/javascript" src="../Tangle/TangleKit/mootools.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/sprintf.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/BVTouchable.js"></script>
    <script type="text/javascript" src="../Tangle/TangleKit/TangleKit.js"></script>

    <!-- TangleKit HY Extension -->
    <script type="text/javascript" src="../Tangle/TangleKit/TangleKitHYExt.js"></script>

    <link rel="stylesheet" href="normal_transform_01_style.css" type="text/css">

    <!-- normal transformation -->
    <script type="text/javascript" src="./hyvector.js"></script>
    <script type="text/javascript" src="./hymatrix.js"></script>
    <script type="text/javascript" src="./normal_transform_01.js"></script>
  </head>
  <body>
    <h1>Tangle: experience</h1>

    <h2>Why doesn't transformation work on normal vectors? Version 0.1</h2>

    <div id="NormalTransformPage">

      <div id="normal_transform_section">
        <!-- Inside this, the elements can be tangled. -->
        <div class="NormalTransformCanvasArea" id="normal_transform_canvas_area">

          <!-- ----------------------------------------------------------------------  -->
          <!-- main canvas -->
          <canvas class="TKNormalTransformCanvas"
                  data-var="scale_x scale_y rotate_theta_deg p0x p0y p1x p1y translation_x translation_y"
                  width="300" height="300">
            Main canvas: This browser doesn't support a canvas.
          </canvas>
          <canvas class="TKCanvasSlider" data-var="px" data-min="0" data-max="100"
                  data-format="%.1f" width="300" height="22">second canvas.
          </canvas>
          <canvas class="TKCanvasSlider" data-var="px" data-min="0" data-max="100"
                  data-format="%.1f" width="300" height="22">third canvas.
          </canvas>

          <!-- ----------------------------------------------------------------------  -->
          <!-- matrix -->
          <!-- ------------------------------  -->

          <!-- S: scale matrix -->
          <div class="scaleMatrix">
            <img id="scale_matrix_bgimage" src="Image/scale_2x2_mat.png">
            <div id="scale_11_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="-3" data-max="3"
                    data-var="scale_x" data-format="%0.1f" data-step="0.1"></span>
            </div>
            <span id="scale_12_id" class="matrixCoef">0.0</span>
            <span id="scale_21_id" class="matrixCoef">0.0</span>
            <div  id="scale_22_id" class="matrixCoef">
              <span id="scale_22_id" class="TKAdjustableNumber" data-min="-3" data-max="3"
                    data-var="scale_y" data-format="%0.1f" data-step="0.1"></span>
            </div>
          </div> <!-- scale matrix -->
          <div id="scale_matrix_id" class="matrixLabelScaling">Scaling</div>

          <!-- ------------------------------  -->
          <!-- R: rotate matrix -->
          <div class="rotateMatrix">
            <img id="rotateMatrixBGImage" src="Image/rotate_2x2_mat.png">
            <div id="rotate_11_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="0"
                    data-max="360" data-var="rotate_theta_deg"></span>
            </div>
            <div id="rotate_12_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="0" data-max="360"
                    data-var="rotate_theta_deg"></span>
            </div>
            <div id="rotate_21_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="0" data-max="360"
                    data-var="rotate_theta_deg"></span>
            </div>
            <div id="rotate_22_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="0" data-max="360"
                    data-var="rotate_theta_deg"></span>
            </div>
          </div> <!-- rotate matrix -->
          <div id="rotate_matrix_id" class="matrixLabelRotation">Rotation</div>

          <!-- ------------------------------  -->
          <!-- p: point column vector -->
          <div class="pointColumnVector">
            <img id="pointColumnVectorBGImage" src="Image/column_2x1_mat.png">
            <div id="p1_11_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="-4" data-max="4"
                    data-step="0.1" data-format="%0.1f" data-var="p1x"></span>
            </div>
            <div id="p1_21_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="-4" data-max="4"
                    data-step="0.1" data-format="%0.1f" data-var="p1y"></span>
            </div>
          </div> <!-- point column vector -->
          <div id="point_column_vector_id" class="matrixLabelPosition">p</div>

          <!-- ------------------------------  -->
          <!-- operator + -->
          <div class="operatorPlus">
            <img id="operatorPlusBGImage" src="Image/op+.png">
          </div> <!-- operator_plus -->

          <!-- ------------------------------  -->
          <!-- t: translation column vector -->
          <div class="translationColumnVector">
            <img id="translationColumnVectorBGImage" src="Image/column_2x1_mat.png">
            <div id="translation_11_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="-4" data-max="4"
                    data-step="0.1" data-format="%0.1f" data-var="translation_x"></span>
            </div>
            <div id="translation_21_id" class="matrixCoef">
              <span class="TKAdjustableNumber" data-min="-4" data-max="4"
                    data-step="0.1" data-format="%0.1f" data-var="translation_y"></span>
            </div>
          </div> <!-- translation column vector -->
          <div id="translation_column_vector_id" class="matrixLabelTranslation">Translation</div>

        </div> <!-- matrix -->

        <!-- point_drag_canvas -->
        <!-- Here id is in the p tag. -->
        <p id="point_dynamic_text">
          Scaling X [
          <!-- The data-var name is very important. Depends on that, link is -->
          <!-- done. -->
          <span class="TKAdjustableNumber" data-var="scale_x"
                data-min="-3" data-max="3" data-format="%.1f" data-step="0.1"></span>
          ]
        </p>
      </div>                          <!-- slider_example -->

    </div>                          <!-- NormalTransformPage -->
  </body>
</html>
